<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100 NoIndent Flex FlexWrap">
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <div class="Container20 NoIndent">
                        <img src="#{resource['venture-layout:images/knob1.svg']}" class="Wid100" />
                    </div>
                    <div class="Container80 NoIndent TexAlRight">
                        <span class="FontEnriquetaBold Fs14 Leaden Opac70 DispBlock">Venture Active Projects</span>
                        <span class="FontPoppinsRegular Leaden Fs26" style="line-height:30px;">Modena Project</span>
                        <div class="EmptyBox10"/>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Aqua DispBlock" style="line-height:30px;">867</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Commits</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Orange DispBlock" style="line-height:30px;">37</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Issues</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Green DispBlock" style="line-height:30px;">5</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Branches</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <div class="Container20 NoIndent">
                        <img src="#{resource['venture-layout:images/knob2.svg']}" class="Wid100" />
                    </div>
                    <div class="Container80 NoIndent TexAlRight">
                        <span class="FontEnriquetaBold Fs14 Leaden Opac70 DispBlock">Venture Active Projects</span>
                        <span class="FontPoppinsRegular Leaden Fs26" style="line-height:30px;">Spark Project</span>
                        <div class="EmptyBox10"/>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Aqua DispBlock" style="line-height:30px;">265</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Commits</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Orange DispBlock" style="line-height:30px;">118</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Issues</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Green DispBlock" style="line-height:30px;">25</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Branches</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <div class="Container20 NoIndent">
                        <img src="#{resource['venture-layout:images/knob3.svg']}" class="Wid100" />
                    </div>
                    <div class="Container80 NoIndent TexAlRight">
                        <span class="FontEnriquetaBold Fs14 Leaden Opac70 DispBlock">Venture Active Projects</span>
                        <span class="FontPoppinsRegular Leaden Fs26" style="line-height:30px;">Sentinel Project</span>
                        <div class="EmptyBox10"/>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Aqua DispBlock" style="line-height:30px;">356</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Commits</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Orange DispBlock" style="line-height:30px;">27</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Issues</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Green DispBlock" style="line-height:30px;">12</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Branches</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Container25 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <div class="Container20 NoIndent">
                        <img src="#{resource['venture-layout:images/knob4.svg']}" class="Wid100" />
                    </div>
                    <div class="Container80 NoIndent TexAlRight">
                        <span class="FontEnriquetaBold Fs14 Leaden Opac70 DispBlock">Venture Active Projects</span>
                        <span class="FontPoppinsRegular Leaden Fs26" style="line-height:30px;">Rio Project</span>
                        <div class="EmptyBox10"/>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Aqua DispBlock" style="line-height:30px;">276</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Commits</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Orange DispBlock" style="line-height:30px;">29</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Issues</span>
                        </div>
                        <div class="Container33 TexAlRight">
                            <span class="FontPoppinsLight Fs30 Green DispBlock" style="line-height:30px;">18</span>
                            <span class="FontPoppinsLight Fs12 Opac80 DispBlock">Branches</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100 NoIndent Flex FlexWrap">

            <!-- Left Side -->
            <div class="Container60 Responsive50 Flex">
                <div class="Card" style="padding:30px;">
                    <div class="CardBigTopic">GROWTH OF PROJECTS
                        <div class="EmptyBox10"/>
                        <div class="DispInlBlock Fright">
                            <p:commandButton value="Active Projects" styleClass="GreenButton MarBot10" type="button"/>
                            <p:commandButton value="Delayed Projects" styleClass="GreenButton MarBot10" type="button"/>
                            <p:commandButton value="Upcoming Projects" styleClass="GreenButton MarBot10" type="button"/>
                            <p:button outcome="/dashboard-pm-2.xhtml" icon="fa fa-plus Fs16 White" styleClass="BlueButton MarBot10"/>
                        </div>
                    </div>
                    <div class="EmptyBox30"/>
                    <img src="#{resource['venture-layout:images/chart-line-purple.svg']}" class="Wid100" />
                    <div class="EmptyBox30"/>
                    <div class="Container25 Responsive50">
                        <i class="icon-to-do Fleft Leaden Opac70 Fs50 MarRight10"/>
                        <span class="FontEnriquetaBold Opac50 Fs14">Active Projects</span><br />
                        <span class="FontPoppinsSemiBold Orange Fs30" style="line-height:30px;">1.233</span>
                    </div>
                    <div class="Container25 Responsive50">
                        <i class="icon-rocket Fleft Leaden Opac70 Fs50 MarRight10"/>
                        <span class="FontEnriquetaBold Opac50 Fs14">Deploys</span><br />
                        <span class="FontPoppinsSemiBold Orange Fs30" style="line-height:30px;">328</span>
                    </div>
                    <div class="Container25 Responsive50">
                        <i class="icon-cloud-download Fleft Leaden Opac70 Fs50 MarRight10"/>
                        <span class="FontEnriquetaBold Opac50 Fs14">Daily Downloads</span><br />
                        <span class="FontPoppinsSemiBold Orange Fs30" style="line-height:30px;">11.870</span>
                    </div>
                    <div class="Container25 Responsive50">
                        <i class="icon-broadcast Fleft Leaden Opac70 Fs50 MarRight10"/>
                        <span class="FontEnriquetaBold Opac50 Fs14">Releases</span><br />
                        <span class="FontPoppinsSemiBold Orange Fs30" style="line-height:30px;">48</span>
                    </div>

                    <div class="EmptyBox20"/>
                    <div class="Separator"/>
                    <div class="EmptyBox20"/>
                    <h:form id="form">
                        <p:dataTable id="singleDT"
                                     var="car"
                                     value="#{dtSelectionView.cars1}"
                                     rows="8"
                                     paginator="true"
                                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                     rowsPerPageTemplate="5,10,15"
                                     selectionMode="single"
                                     selection="#{dtSelectionView.selectedCar}"
                                     rowKey="#{car.id}">

                            <p:ajax event="rowSelect" process="singleDT" update=":form:carDetail" oncomplete="PF('carDialog').show()" />

                            <f:facet name="header">
                                GROWTH OF PROJECTS LIST
                            </f:facet>

                            <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                                <h:outputText value="#{car.id}" />
                            </p:column>
                            <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                                <h:outputText value="#{car.year}" />
                            </p:column>
                            <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                                <h:outputText value="#{car.brand}" />
                            </p:column>
                            <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                                <h:outputText value="#{car.color}" />
                            </p:column>
                        </p:dataTable>
                        <p:dialog header="Car Info"
                                  widgetVar="carDialog"
                                  modal="true"
                                  showEffect="fade"
                                  hideEffect="fade"
                                  resizable="false"
                                  responsive="true">
                            <p:outputPanel id="carDetail" style="text-align:center;">
                                <p:panelGrid columns="2"
                                             layout="grid"
                                             styleClass="ui-panelgrid-blank"
                                             rendered="#{not empty dtSelectionView.selectedCar}">
                                    <f:facet name="header">
                                        <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                    </f:facet>

                                    <h:outputText value="Id:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                    <h:outputText value="Year" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                    <h:outputText value="Color:" style="font-weight: bold"/>
                                    <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                    <h:outputText value="Price" style="font-weight: bold"/>
                                    <h:outputText value="\$#{dtSelectionView.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                    </h:form>
                </div>
            </div>

            <!-- Right Side -->
            <div class="Container40 Responsive50 NoIndent Flex FlexWrap">

                <div class="Container100 Flex">
                    <div class="Card">
                        <style>
                            .timeline{border-left:solid 1px #d0d6d9; margin:0px 0px 0px 20px; padding:10px 0px 0px;}
                            .timeline li{overflow:hidden; line-height:14px; padding:20px;}
                            .timeline li img{margin-right:10px; margin-left:-33px; position:absolute;}
                        </style>
                        <div class="Container33 Responsive ui-fluid">
                            <div class="Card AquaBack">
                                <span class="FontPoppinsSemiBold Fs14 White">Open Tasks</span>
                                <span class="FontPoppinsLight Fs24 Opac70 Fright White">2331</span>
                            </div>
                            <ul class="timeline">
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-blue.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of teamwork</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-blue.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Recurring Tasks On Calendar</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-blue.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Font Icons metrics resizing</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-blue.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of CSS And JS Files</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-blue.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Development Of Venture Timeline Structure</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="EmptyBox10"/>
                            <p:commandButton value="Load More" styleClass="GrayButton" type="button"/>
                        </div>

                        <div class="Container33 Responsive ui-fluid">
                            <div class="Card OrangeBack">
                                <span class="FontPoppinsSemiBold Fs14 White">In Progress</span>
                                <span class="FontPoppinsLight Fs24 Opac70 Fright White">34</span>
                            </div>
                            <ul class="timeline">
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-orange.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of teamwork</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-orange.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Recurring Tasks On Calendar</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-orange.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Font Icons metrics resizing</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-orange.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of CSS And JS Files</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-orange.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Development Of Venture Timeline Structure</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="EmptyBox10"/>
                            <p:commandButton value="Load More" styleClass="GrayButton" type="button"/>
                        </div>

                        <div class="Container33 Responsive ui-fluid">
                            <div class="Card GreenBack">
                                <span class="FontPoppinsSemiBold Fs14 White">Done</span>
                                <span class="FontPoppinsLight Fs24 Opac70 Fright White">755</span>
                            </div>
                            <ul class="timeline">
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-green.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of teamwork</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-green.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Recurring Tasks On Calendar</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-green.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Font Icons metrics resizing</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-green.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Improvements of CSS And JS Files</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                                <li>
                                    <img src="#{resource['venture-layout:images/dot-green.svg']}" class="Fleft" />
                                    <div class="DispInlBlock Fleft">
                                        <div class="EmptyBox5"/>
                                        <span class="FontPoppinsLight Fs12 Leaden DispBlock Opac50">18.08.2016</span>
                                        <span class="FontPoppinsSemiBold Fs12 Leaden DispBlock">Development Of Venture Timeline Structure</span>
                                        <span class="FontPoppinsLight Fs10 Aqua">Reported by @hansolo</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="EmptyBox10"/>
                            <p:commandButton value="Load More" styleClass="GrayButton" type="button"/>
                        </div>
                    </div>
                </div>

                <div class="Container100 Flex">
                    <div class="Card">
                        <div class="CardBigTopic">QUICK PROJECT PANEL
                            <div class="EmptyBox10"/>
                            <div class="Container100 ui-fluid">
                                <p:inputText placeholder="Project Name"/>
                            </div>
                            <div class="Container33 Responsive50 ui-fluid">
                                <p:inputText placeholder="Project Group"/>
                            </div>
                            <div class="Container33 Responsive50 ui-fluid">
                                <p:inputText placeholder="Assign To"/>
                            </div>
                            <div class="Container33 Responsive50 ui-fluid">
                                <p:inputText placeholder="Project Status"/>
                            </div>
                            <div class="Container100">
                                <p:selectManyCheckbox layout="responsive" columns="3">
                                    <f:selectItem itemLabel="Sentinel" itemValue="Sentinel" />
                                    <f:selectItem itemLabel="Spark" itemValue="Spark" />
                                    <f:selectItem itemLabel="Ronin" itemValue="Ronin" />
                                    <f:selectItem itemLabel="Rio" itemValue="Rio" />
                                    <f:selectItem itemLabel="Modena" itemValue="Modena" />
                                    <f:selectItem itemLabel="Adamantium" itemValue="Adamantium" />
                                    <f:selectItem itemLabel="Volt" itemValue="Volt" />
                                    <f:selectItem itemLabel="Titan" itemValue="Titan" />
                                    <f:selectItem itemLabel="Olympos" itemValue="Olympos" />
                                </p:selectManyCheckbox>
                            </div>
                            <div class="EmptyBox10"/>
                            <div class="DispInlBlock Fright">
                                <p:commandButton value="New Projects" styleClass="OrangeButton MarBot10" type="button"/>
                                <p:commandButton value="Old Projects" styleClass="OrangeButton MarBot10" type="button"/>
                                <p:commandButton value="Delayed Projects" styleClass="RedButton MarBot10" type="button"/>
                                <p:button outcome="/dashboard-pm-2.xhtml" icon="fa fa-cog Fs16 White" styleClass="GreenButton MarBot10"/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </ui:define>
</ui:composition>